<template>
    <van-popup v-model="show" round position="bottom">
        <van-picker
            class="fund-picker"
            :columns="columns"
            :default-index="defaultIndex"
            :item-height="60"
            @change="handleChange"
        />
        <div class="fund-container-footer">
            <button class="fund-container-close" @click="show = false">取消</button>
            <button class="fund-container-confirm" solt="confirm" @click="handleConfirm">确定</button>
        </div>
    </van-popup>
</template>

<script>
export default {
    data () {
        return {
            show: false,
            pickerVal: '全部',
            defaultIndex: 0,
            columns: ['全部', '收入', '支出']
        }
    },
    methods: {
        /* 收入、支出 —— 选项改变 */
        handleChange (picker, value, index) {
            this.pickerVal = value
        },

        /* 确认按钮 */
        handleConfirm () {
            this.$emit('confirm', this.pickerVal)
            this.show = false
        }
    }
}
</script>

<style lang="less" scoped>
.fund-picker {
    height: 180px;
    padding: 10px 0;
    overflow: hidden;
}
.fund-container-footer {
    padding: 10px 54px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fund-container-close {
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #2D3748;
        border: none;
        background: transparent;
    }
    .fund-container-confirm {
        width: 170px;
        height: 56px;
        line-height: 56px;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: #FFFFFF;
        border: none;
        border-radius: 20px;
        background: linear-gradient(136deg,#6BBFFC 6%, #00D5E3 90%);
    }
}
</style>
